<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>CSS Button Hover</title>

</head>

<body>

  <div id="copyScriptCodeOk">Copy</div>

  <script>

    let copyBtnStyle = document.createElement('style');
    copyBtnStyle.type = 'text/css';


    copyBtnStyle.innerHTML = `  #copyScriptCodeOk {
      flex: 1 1 auto;
      margin: 10px;
      padding: 20px;
      border: 2px solid #fc5531;
      text-align: center;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
      transition: 0.3s;
    }

    #copyScriptCodeOk:after {
      position: absolute;
      transition: 0.3s;
      content: "";
      width: 0;
      left: 50%;
      bottom: 0;
      height: 3px;
      background: #fc5531;
    }


    #copyScriptCodeOk:after {
      height: 120%;
      left: -10%;
      transform: skewX(15deg);
      z-index: -1;
    }

    #copyScriptCodeOk:hover {
      cursor: pointer;
    }

    #copyScriptCodeOk:hover:after {
      width: 100%;
      left: 0;
    }


    #copyScriptCodeOk:hover {
      border-radius: 30px;
    }

    #copyScriptCodeOk:hover:after {
      width: 0%;
    }`


    document.body.appendChild(copyBtnStyle);

  </script>
</body>

</html>